<template>
    <div style="margin: 20px;">
        <el-row>
      <el-col  :span="2">
        <el-input  placeholder="请输入订单编号"  v-model="ShopToBeSignedForForm.commodityId"  style="width: 150px; margin-right: 10px;"  @change="selsectcommodityId" />
      </el-col>




    </el-row>
  
  
  
      <div v-for="(order, index) in ShopToBeSignedFor" :key="index" style="margin-top: 20px;">
        <el-descriptions :title="`订单 ${index + 1} 信息`" :column="2" border>
          <el-descriptions-item label="订单编号">{{ order.commodityId }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ formatDate(order.createdAt) }}</el-descriptions-item>
          <el-descriptions-item label="收货人">{{ order.receiverName }} ({{ order.receiverPhone }})</el-descriptions-item>
          <el-descriptions-item label="地址">{{ order.addressInfo }}</el-descriptions-item>
          <el-descriptions-item label="支付状态">{{ paymentStatusText(order.paymentStatus) }}</el-descriptions-item>
          <el-descriptions-item label="发货状态">{{ shippingStatusText(order.shippingStatus) }}</el-descriptions-item>
        </el-descriptions>
  
        <el-table :data="order.commodityDetails || []" style="width: 100%; margin-top: 20px;" stripe>
          <el-table-column prop="productName" label="商品名称"></el-table-column>
          <el-table-column prop="price" label="单价" width="180">
            <template #default="scope">￥{{ scope.row.price }}</template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" width="180"></el-table-column>
          <el-table-column 
          label="总价" width="180">
            <template #default="scope">￥{{ scope.row.totalPrice }}</template>
          </el-table-column>
          <el-table-column prop="notes" label="备注"></el-table-column>
        </el-table>
        <div class="order-total" style="text-align: right; margin-top: 20px;">
           <el-row>
            <el-col :span="4">
              <span >订单总金额：￥{{ order.total }}</span>
            </el-col>
            <el-col :push="14" :span="4">
              <span>折扣后价格：￥{{ order.discountedPrices }}</span>
            </el-col>
          </el-row>
          <el-button type="primary" v-if="order.shippingStatus === 1 && order.paymentStatus==1" @click="SignForReceipts(order)" style="margin-left: 20px;">签收</el-button>
        </div>
        <!-- <hr /> -->
      </div>
  
    
      <el-dialog
    v-model="isShow1"
    title="确认签收？"
    width="500"
    :before-close="handleClose"
  >
  <span>
  <p>确认已收到货并签收？  此操作将无法撤回</p>
    
  </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isShow1 = false">取消</el-button>
        <el-button type="primary" @click="ConfirmSignature">
          确认发货
        </el-button>
      </div>
    </template>
</el-dialog>
  
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="ShopToBeSignedForForm.pageNum"
          v-model:page-size="ShopToBeSignedForForm.pageSize"
          :page-sizes="[1, 4, 6, 8]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="ShopToBeSignedForTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ManagerPendingShipment',
    data() {
      return {
        ShopToBeSignedForForm:{
          pageNum: 1,
          pageSize: 10,
          commodityId: null,
          addressInfo: null,
          receiverName: null,
          receiverPhone: null,
          paymentStatus: null,
          shippingStatus: null,
          createdAt: null,
        },
        ShopToBeSignedFor:[],
        ShopToBeSignedForTotal:0,
        cities: [
        { label: '未支付', value: '0' },
        { label: '已支付', value: '1' },
        { label: '全部', value: null },
      ],
      isShow1: false,
      Sign:{
        commodityId:null,
      },
      };
    },
    methods: {
        ConfirmSignature(){
                this.$http.post("/order/commodity/SignForReceipts",this.Sign)
                .then(resp => {
                    if (resp.data.code == 200) {
                        this.$message.success("签收成功");
                        this.isShow1 = false;
                        this.getShopToBeSignedFor();
                    } else {
                        this.$message.error(resp.data.msg);
                    }
                });
        },
        SignForReceipts(obj){
        this.Sign.commodityId=obj.commodityId
        this.isShow1 = true;

      },
        selsectcommodityId() {
      if (this.ShopToBeSignedForForm.commodityId == null) {
        alert("请输入订单编号");
        return;
      }
      this.getShopToBeSignedFor();
    },
    

    //   getShopToBeSignedFor() {
    //     this.$http.post("/order/commodity/selsectShopToBeSignedFormanager",this.ShopToBeSignedForForm)
    //       .then(resp => {
    //         this.ShopToBeSignedFor = resp.data.data.list;
    //         this.ShopToBeSignedForTotal = resp.data.data.total;
    //         if (this.ShopToBeSignedForTotal == 0) {
    //           this.$message.error("没有待发货订单");
    //         }
    //       });
    //   },
    getShopToBeSignedFor() {
    this.$http.post("/order/commodity/shopToBeSignedFor", this.ShopToBeSignedForForm)
        .then(resp => {
            // 获取订单列表
            this.ShopToBeSignedFor = resp.data.data.list;

            // 对订单进行排序，已支付的在前，未支付的在后
            this.ShopToBeSignedFor.sort((a, b) => {
                return (b.paymentStatus - a.paymentStatus); // 1 - 0 = 1，保持 1 在前
            });

            this.ShopToBeSignedForTotal = resp.data.data.total;
            if (this.ShopToBeSignedForTotal == 0) {
                this.$message.error("没有待发货订单");
            }
        });
},
     
      handleSizeChange(val) {
        this.ShopToBeSignedForForm.pageSize = val;
        this.getShopToBeSignedFor();
      },
      handleCurrentChange(val) {
        this.ShopToBeSignedForForm.pageNum = val;
        this.getShopToBeSignedFor();
      },
  
      formatDate(dateString) {
        if (!dateString) return '';
        const date = new Date(dateString);
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
      },
      paymentStatusText(status) {
        return status === 1 ? '已支付' : '未支付';
      },
      shippingStatusText(status) {
        const statusMap = ['未发货', '已发货', '已签收', '退货中', '已退货'];
        return statusMap[status] || '未知状态';
      },
    
    },
    mounted() {
      this.getShopToBeSignedFor();
      
    },
  };
  </script>
  
  <style scoped>
  /* 样式可以根据需要调整 */
  
  .el-dropdown-link {
    color: #5DE2E7; /* 改变为你想要的颜色 */
  }
  </style>